<template>
	<view style="background-color: #fff;">
		<view class="sousuo">

			<picker mode="selector" :range="monthRange.map(item => item.text)" :value="selectedMonthIndex"
				@change="onMonthChange" class="picker-style">
				<view class="picker-content">
					<text class="time-tag">请选择测评日期</text><text>{{ selectedMonth }}</text>
				</view>
			</picker>
		 
				<uni-section>
				
					<uni-segmented-control :current="currentStatus" :values="statusItems" @clickItem="onStatusClickItem"
						:active-color="'#007aff'" style-type="text"  class="tab_pc"/>
				
				</uni-section>
		
		</view>

		<view class="table-yg" v-for="item in people" :key="item.nickName">
			<uni-card>
				<view class="uni-card-body">
					<!-- 设置 son01 为 flex 布局，横向排列 -->
				   <view>
					   <view class="son01">
					   	<text class="ziti">姓名：{{ item.nickName }}</text>
					   </view>
					   <view class="user_info">部门：{{ item.deptName }}</view>
					   <view class="user_info">岗位：{{ item.postName }}</view>
				   </view>
					
					<view >
						<!-- 使用 uni-tag 作为状态标签 -->
						<uni-tag :text="item.status === 0 || item.status === null ? '未评' : '已评'" :size="'normal'"
							:type="item.status === 0 || item.status === null ? 'default' : 'success'"
							:disabled="false" :inverted="false" />
						<button @click="ratePerson(item)" class="btn" v-if="currentStatus === 0" size="mini"
							type="primary">评分</button>
					</view>
				</view>
			</uni-card>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		findpeople
	} from '@/api/shouye.js';
	import {
		UserDetails
	} from "@/store/UserDetails.js";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";

	const userData = UserDetails();

	const isEmployee = ref("");
	const datadx = ref({
		"roleId": '',
		"assessDate": '',
		"userId": '',
		"status": ''
	});

	// 初始化数据
	const loading = ref(false);
	const searchName = ref("");
	const currentStatus = ref(0); // 默认选中状态为 "未评"
	const selectedMonth = ref("");
	const selectedMonthIndex = ref(12);


	const people = ref([]);

	// 月份范围
	const monthRange = ref([]);
	const statusItems = ref(['未评', '已评']); // 状态项数组

	// 生成月份范围
	const generateMonthRange = () => {
		const currentDate = new Date();
		const currentYear = currentDate.getFullYear();
		const currentMonth = currentDate.getMonth() + 1;

		const months = [];

		for (let i = -12; i <= 0; i++) { // 只生成过去6个月和当前月
			let year = currentYear;
			let month = currentMonth + i;

			if (month > 12) {
				month -= 12;
				year += 1;
			} else if (month <= 0) {
				month += 12;
				year -= 1;
			}

			months.push({
				value: `${year}-${month.toString().padStart(2, '0')}`,
				text: `${year}-${month.toString().padStart(2, '0')}`
			});
		}

		monthRange.value = months;
		selectedMonth.value = months[12].value;
	};

	// 更新月份时触发
	const onMonthChange = (e) => {
		const selectedMonthText = monthRange.value[e.detail.value].value;
		selectedMonth.value = selectedMonthText;
		datadx.value.assessDate = selectedMonthText; // 更新到 datadx 中
		fetchData();
	};

	// 更新状态时触发
	const onStatusClickItem = (e) => {
		currentStatus.value = e.currentIndex;
		datadx.value.status = currentStatus.value; // 更新状态
		fetchData(); // 重新请求数据
	};
	//评分按钮点击事件
	const ratePerson = (item) => {
		// console.log(item.roleId)
		//判断给那些用户评分
		if (item.roleId === 100) {
			console.log("基层");
			uni.navigateTo({
				url: `/pages/check/assessjc/assessjc?userId=${item.userId}&assessDate=${datadx.value.assessDate}`
			});
		} else {
			console.log("领导");
			uni.navigateTo({
				url: `/pages/check/assess/assess?userId=${item.userId}&assessDate=${datadx.value.assessDate}`
			});
		}
	};
	// 初始化网页，请求数据
	const fetchData = async () => {
		loading.value = true;
		if (isEmployee.value == 1) {
			datadx.value.roleId = 100;
		} else {
			datadx.value.roleId = userData.UserText.roleIds[0];
		}

		datadx.value.userId = userData.UserText.data.userId;
		datadx.value.assessDate = selectedMonth.value;
		datadx.value.status = currentStatus.value;

		try {
			// 调用 findpeople 函数并传入 datadx.value
			const res = await findpeople(datadx.value);
			console.log(res);
			people.value = res.rows;
		} catch (error) {
			console.error("请求数据失败", error);
		} finally {
			loading.value = false;
		}
	};

	// 在页面加载时生成月份范围
	onMounted(() => {

		generateMonthRange();
		fetchData(); // 调用接口获取数据
	});

	onLoad((option) => {
		isEmployee.value = (option.isEmployee);
		console.log(isEmployee.value);
	});
</script>



<style scoped lang="scss">
	

	
	.uni-card-body{
		display: flex;
		justify-content: space-between;
	}
	
	/* 让 son01 容器成为 flex 布局，横向排列 */
	.son01 {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: space-between;
		/* 子项之间留有间隙 */
		gap: 10rpx;
		/* 子项之间的间隙 */
	}

	/* 控制文本、标签和按钮的大小间距 */
	.son-name {
		font-size: 25px;
		color: #333;
	}


	.btn {
		margin-right: 10rpx;
		display: flex;
		margin-top: 30rpx;
	}

	/* picker样式 */
	.picker-style {
		width: 100%;
		/* 保证picker宽度自适应 */
		padding: 12rpx;
		/* 上下左右的内边距 */
		background-color: #fff;
		/* 背景颜色为白色 */
		border-radius: 5rpx;
		/* 圆角 */
		border-bottom: 1rpx solid #cecece;
		/* 边框颜色 */
		margin-top: 10rpx;
		/* 上边距，确保和其他元素的间距 */
	}

	.picker-content {
		display: flex;
		justify-content: space-around;
		/* 元素左右分布，且元素两边有相等间距 */
		align-items: center;
		flex-direction: row;
		height: 80rpx;
	}



	/* picker文本样式 */
	.picker-text {
		font-size: 16rpx;
		/* 设置文本字体大小 */
		color: #333;
		/* 设置文本颜色 */
		text-align: center;
		/* 文本居中 */
		line-height: 50rpx;
		/* 垂直居中对齐文本 */
	}

	/* 为整个 uni-section 容器添加背景色和适当的内外边距 */
	.uni-section {
		background-color: #f9f9f9;
		/* 背景色，避免过于单调 */
		padding: 20rpx 0;
		/* 顶部和底部的内边距，给上下元素留出间隙 */
		margin-bottom: 20rpx;
		/* 和下方元素之间的间距 */
		border-radius: 10rpx;
		/* 圆角效果 */
		box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.05);
		/* 柔和的阴影效果 */
		margin-top: -60rpx;
	}

	/* 针对 uni-segmented-control 添加样式 */
	.uni-segmented-control {
		display: flex;
		/* 设置为 flex 布局 */
		justify-content: space-between;
		/* 让每个 item 平均分配空间 */
		align-items: center;
		/* 垂直居中对齐 */
		padding: 8rpx 15rpx;
		/* 控制组件内部的内边距 */
		background-color: #fff;
		/* 白色背景 */
		border-radius: 25rpx;
		/* 圆角效果 */
		border: 1rpx solid #ddd;
		/* 浅灰色边框 */
	}

	/* 样式优化单个按钮（段控制项） */
	.uni-segmented-control-item {
		font-size: 14rpx;
		/* 设置字体大小 */
		color: #333;
		/* 默认字体颜色 */
		padding: 8rpx 12rpx;
		/* 按钮的内边距 */
		border-radius: 20rpx;
		/* 圆角 */
		transition: background-color 0.3s ease;
		/* 添加平滑的过渡效果 */
	}

	.ziti {
		font-size: 30rpx;
		width: 240rpx;
		height: 40rpx;
		margin-bottom: 20rpx;
	}

	.user_info {
		font-size: 24rpx;
		height: 28px;
		line-height: 28px;
	}

	/* 鼠标悬停效果 */
	.uni-segmented-control-item:hover {
		background-color: #f0f0f0;
		/* 鼠标悬停时背景变亮 */
	}

	/* 激活状态的按钮 */
	.uni-segmented-control-item--active {
		background-color: #007aff;
		/* 激活状态时背景颜色 */
		color: #fff;
		/* 激活时字体颜色变为白色 */
	}

	/* active color 样式 */
	.uni-segmented-control-item--active:focus {
		outline: none;
		/* 移除点击时的焦点框 */
	}
</style>